<template>
  <div class="home">

    <div id="nav">
      <div id="first">
        <span>请选择目的地</span>
        <div id="first-inner">
          <span class="zheng">郑州</span>
          <span class="fa fa-angle-down"></span>
          <span class="piao">景点门票</span>
        </div>
        <span class="ellip">•••</span>
      </div>
      <router-link to="/my/search">
        <div id="second">
          <span class="fa fa-search fangda"></span>
          <span>城市名/景点名/主题</span>
        </div>
      </router-link>
    </div>

    <div class="page-body">

      <Swiper :list="loopList" loop auto height="182px"></Swiper>

      <div class="page-first white">
        <router-link to="/my/viewlist/亲子游">
          <div class="item">
            <img src="/static/img/logo/qzy.png">
            <p>亲子游</p>
          </div>
        </router-link>
        <router-link to="/my/viewlist/情侣游">
          <div class="item">
            <img src="/static/img/logo/qly.png">
            <p>情侣游</p>
          </div>
        </router-link>
        <router-link to="/my/viewlist/朋友游">
          <div class="item">
            <img src="/static/img/logo/pyy.png">
            <p>朋友游</p>
          </div>
        </router-link>
        <router-link to="/my/viewlist/家庭游">
          <div class="item">
            <img src="/static/img/logo/jty.png">
            <p>家庭游</p>
          </div>
        </router-link>
        <router-link to="/my/viewlist/团体游">
          <div class="item">
            <img src="/static/img/logo/tty.png">
            <p>团体游</p>
          </div>
        </router-link>
      </div>

      <div class="page-first biankuang white">
        <router-link to="/my/viewlist/主题乐园">
          <div class="item">
            <img src="/static/img/logo/ztly.png" class="round">
            <p>主题乐园</p>
          </div>
        </router-link>
        <router-link to="/my/viewlist/滑雪冰雕">
          <div class="item">
            <img src="/static/img/logo/hxbd.png" class="round">
            <p>滑雪冰雕</p>
          </div>
        </router-link>
        <router-link to="/my/viewlist/自然风景">
          <div class="item">
            <img src="/static/img/logo/zrfj.png" class="round">
            <p>自然风景</p>
          </div>
        </router-link>
        <router-link to="/my/viewlist/展览演出">
          <div class="item">
            <img src="/static/img/logo/zlyc.png" class="round">
            <p>展览演出</p>
          </div>
        </router-link>
        <router-link to="/my/allTheme">
          <div class="item">
            <img src="/static/img/logo/more.png" class="round">
            <p>更多主题</p>
          </div>
        </router-link>
      </div>

      <div id="page-third" class="white">
        <div @touchstart="shenbianClick">
          <img src="/static/img/logo/sbjd.png">
          <span>身边景点</span>
        </div>
        <div @touchstart="shenbianClick">
          <img src="/static/img/logo/zbcs.png">
          <span>周边城市</span>
        </div>
      </div>

      <div id="page-four">
        <div class="title">
          <div class="title-line1"></div>
          <div class="buju">
            <img src="/static/img/logo/jctj.png">
            <span class="orange size">精彩推荐</span>
          </div>
          <div class="title-line2"></div>
          <div>
            <span class="grey size" @touchstart="pageFour=!pageFour">更多</span>
            <span class="fa fa-angle-right orange"></span>
          </div>
        </div>

        <router-link v-for="j in jctjArr" :key="j._id" :to="'/my/detail/'+j._id">
          <div class="page-four-item">
            <img :src="'/img/loop/'+j.pic[0]">
            <div class="item-inner">
              <p>{{j.name}}</p>
              <p>{{j.intro}}</p>
              <div class="price">
                <span>￥</span><span>{{j.price[0].pprice}}</span><span>起</span>
              </div>
              <p>{{j.theme}}</p>
            </div>
          </div>
        </router-link>
        <div v-show="pageFour">
          <div class="more-tip" @click="moreClickFour" v-show="jctjArr.length>0&&jctjArr.length%5==0">点击加载更多</div>
          <div class="more-tip" v-show="jctjArr.length%5!=0||jctjArr.length==0">亲，没有更多推荐啦</div>
        </div>

      </div>

      <div id="page-five">
        <div class="title">
          <div class="title-line1"></div>
          <div class="buju">
            <img src="/static/img/logo/cdzk.png">
            <span class="lightorange size">超低折扣</span>
          </div>
          <div class="title-line2"></div>
          <div>
            <span class="grey size" @touchstart="pageFive=!pageFive">更多</span>
            <span class="fa fa-angle-right lightorange"></span>
          </div>
        </div>
        <router-link v-for="c in zdzkArr" :key="c._id" :to="'/my/detail/'+c._id">
          <div class="page-four-item">
            <img :src="'/img/loop/'+c.pic[0]">
            <div class="item-inner">
              <p>{{c.name}}</p>
              <p>{{c.intro}}</p>
              <div class="price">
                <span>￥</span><span>{{c.price[0].pprice}}</span><span>起</span>
              </div>
              <p>{{c.theme}}<img class="jz" src="/static/img/logo/jz.png"></p>
            </div>
          </div>
        </router-link>
        <div v-show="pageFive">
          <div class="more-tip" @click="moreClickFive" v-show="zdzkArr.length>0&&zdzkArr.length%5==0">点击加载更多</div>
          <div class="more-tip" v-show="zdzkArr.length%5!=0||zdzkArr.length==0">亲，没有更多折扣景点啦</div>
        </div>
      </div>
      
      <div id="split"></div>

      <BottomBar></BottomBar>
      <HomeBottomBar></HomeBottomBar>

    </div>


  </div>
</template>

<script>
import {Swiper,Divider} from 'vux';
import BottomBar from '../components/BottomBar.vue';
import HomeBottomBar from '../components/HomeBottomBar.vue';

export default {
  data:function(){
    return {
      loopList:[
        {img:"/static/img/loop/play.jpg"},
        {img:"/static/img/loop/play1.png"},
        {img:"/static/img/loop/play2.png"},
        {img:"/static/img/loop/play3.jpg"},
        {img:"/static/img/loop/play4.jpg"},
      ],
      jctjArr:[],
      zdzkArr:[],
      pageFour:false,
      pageFive:false
    }
  },
  components:{
    Swiper,
    Divider,
    BottomBar,
    HomeBottomBar
  },
  computed:{
    
  },
  methods:{
    shenbianClick:function(){
      layer.msg("请开启定位功能后尝试");
    },
    // 根据精彩推荐或超低折扣查询渲染首页的数据
    searchShow:function(){
      var page = this.jctjArr.length/5;
      if(page<1){
        page=1;
      }else{
        page = page+1;
      };
      this.http.post("/api/show",{show:"精彩推荐",page:page})
      .then(res=>{
          this.jctjArr = res.data.msg;
      });
    },
    searchShowTwo:function(){
      var page = this.zdzkArr.length/5;
      if(page<1){
        page=1;
      }else{
        page = page+1;
      };
      this.http.post("/api/showtwo",{show:"超低折扣",page:page})
      .then(res=>{
          this.zdzkArr = res.data.msg;
      });
    },
    moreClickFour:function(){
      this.searchShow();
    },
    moreClickFive:function(){
      this.searchShowTwo();
    }

  },
  mounted:function(){
     this.searchShow();
     this.searchShowTwo();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home{
    width:100vw;
  }
  .page-body{
    background-color:#F8F8F8;
  }
  .white{
    background-color:white;
  }
  #nav{
      height:86px;
      background:linear-gradient(to right,#F34B4A);
      padding:10px;
  }
  #first{
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  #first>span{
    font-size:15px;
  }
  #first-inner .zheng{
    font-size:14px;
  }
  #first-inner .piao{
    margin-left:8px;
  }
  #second{
    color:white;
    font-size:12px;
    background-color:#FF6F6D;
    height:33px;
    border-radius:20px;
    margin-top:10px;
    text-align:center;
    line-height:33px;
    cursor:pointer;
  }
  #second .fangda{
    font-size:16px;
    margin-right:7px;
  }
  .page-first{
    display:flex;
    padding:14px;
    justify-content:space-between;
    align-items:center;
  }
  .item{
    text-align:center;
  }
  .item img{
    width:55.25px;
    height:55.25px;
  }
  .item p{
    margin:0;
    margin-top:2px;
    font-size:10px;
    color:#9b9b9b;
  }
  .round{
    border-radius:50%;
  }
  .biankuang{
    border:solid 1px #dedede;
  }
  #page-third{
    display:flex;
    align-items:center;
    border:solid 1px #dedede;
    margin-top:10px;
    padding:0.7vh 0;
    justify-content:center;
  }
  #page-third>div:nth-of-type(1){
     border-right:solid 1px #dedede;
     padding:0.08vh 12vw;
  }
  #page-third>div:nth-of-type(2){
    padding:0.08vh 12vw;
  }
  #page-third>div img{
    vertical-align:middle;
  }
  #page-third>div span{
    margin-left:1vw;
    font-size:14px;
    color:#666;
  }
  .title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px;
  }
  .title-line1,.title-line2{
    height:1px;
    background-color:#dedede;
    flex-grow:1;
  }
  .title-line1{
    margin-right:8px;
  }
  .title-line2{
    margin:0 8px;
  }
  .buju{
    display:flex;
    align-items:center;
  }
  .buju>span{
    margin-left:5px;
  }
  .size{
    font-size:12px;
  }
  .orange{
    color:#f34b4a;
  }
  .grey{
    color:#9b9b9b;
  }
  .lightorange{
    color:#ff911b;
  }
  .page-four-item{
    display:flex;
    align-items:center;
    background-color:white;
    padding:9px 15px 9px 9px;
    border-top:solid 1px #dedede;
  }
  .page-four-item>img{
    width:76px;
    height:74px;
  }
  .item-inner{
    flex-grow:1;
    margin-left:8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-inner>p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin:0;
  }
  .item-inner>p:nth-of-type(1){
    color:#4a4a4a;
    font-size:12px;
  }
  .item-inner>p:nth-of-type(2){
    color:#9b9b9b;
    font-size:10px;
  }
  .item-inner>p:nth-of-type(3){
    color:#666;
    font-size:10px;
  }
  .price{
    text-align:right;
    height:25px;
  }
  .price>span:nth-of-type(1){
    display:inline-block;
    font-size: 10px;
    color: #ff6f6d;
    line-height: 16px;
    height:16px;
  }
  .price>span:nth-of-type(2){
    font-size: 16px;
    color: #ff6f6d;
    font-weight: bold;
    line-height: 14px;
  }
  .price>span:nth-of-type(3){
    font-size: 10px;
    line-height: 14px;
    color: #bcbcbc;
  }
  .jz{
    float:right;
  }
  #split{
    border:solid 1px #dedede;
    height:22px;
  }
  .page-first a{
    text-decoration:none;
  }
  a{
    text-decoration:none;
  }
  .more-tip{
    width:100%;
    height:42px;
    background-color:white;
    text-align:center;
    line-height:42px;
    font-size:13px;
    color:#666;
    border-top:1px solid #dedede;
  }
</style>
